
<template>
  <div class="container">
    <div class="top">
      <h3>财务统计</h3>
      <div class="search">
        <span class="demonstration">开始日期</span>
        <div class="block">
          <el-date-picker v-model="startTime" type="date" placeholder="选择日期"></el-date-picker>
        </div>
        <span class="demonstration">结束日期</span>
        <div class="block">
          <el-date-picker v-model="endTime" type="date" placeholder="选择日期"></el-date-picker>
        </div>
        <el-button type="primary" @click="searchBtn()">搜索</el-button>
      </div>
      <div class="tab">
        <p>个人奖励—未打款金额 {{not}}</p>
        <p>个人奖励—已打款金额 {{pay}}</p>
        <p>团队奖励—未打款金额 {{nots}}</p>
        <p>团队奖励—已打款金额 {{pays}}</p>
      </div>
    </div>

    <div class="bottom">
      <h3>会员统计</h3>
      <div class="tab">
        <p>会员注册人数 : {{person}}人</p>
        <p>今日注册人数 : {{todayPerson}}人</p>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      not: 0,
      nots: 0,
      pay: 0,
      pays: 0,
      person: 0,
      todayPerson: 0
    };
  },
  created() {
    this.getPeople();
    this.getList();
  },
  methods: {
    //人员信息
    getPeople() {
      let url = "/user/count";
      this.httpPost(url, {}, res => {
        if (res.code == 200) {
          this.person = res.data.person;
          this.todayPerson = res.data.todayPerson;
        }
      });
    },
    //搜索
    searchBtn() {
      if (this.startTime && typeof(this.startTime) !== 'string') {
        this.startTime =
          this.startTime.getFullYear() +
          "-" +
          (this.startTime.getMonth() + 1) +
          "-" +
          this.startTime.getDate();
      }
      if (this.endTime && typeof(this.endTime) !== 'string') {
        this.endTime =
          this.endTime.getFullYear() +
          "-" +
          (this.endTime.getMonth() + 1) +
          "-" +
          this.endTime.getDate();
      }
      this.getList();
    },

    //获取数据
    getList() {
      let url = "/finance/selectMoney";
      let params = {
        startTime: this.startTime,
        endTime: this.endTime
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.not = res.data.not;
          this.nots = res.data.nots;
          this.pay = res.data.pay;
          this.pays = res.data.pays;
        } else {
          console.log("查询失败");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 50px;
  text-align: center;

  .search {
    width: 54%;
    height: 40px;
    margin-left: 23%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
  }

  .top {
    background: #f0f0f0;
    width: 100%;
    height: 400px;
    padding-top: 30px;
    margin-bottom: 30px;
  }

  .bottom {
    background: #f0f0f0;
    width: 100%;
    height: 200px;
    padding-top: 30px;
  }

  .tab {
    width: 54%;
    height: 200px;
    margin-left: 23%;
  }
}
</style>